<script setup lang="ts">
import {ref, defineModel, watch, defineEmits} from 'vue'
import {type DataTableColumns, type DataTableRowKey, type FormInst, NButton} from 'naive-ui'
import {getTableListAPI, saveXXTableAPI} from '@/api/api'

const showModal = defineModel('show', {type: Boolean, required: true})
const emits = defineEmits(['handleSubmit'])

// 表格数据
const contentLoading = ref<boolean>(false)
const checkedRowKeys = ref<DataTableRowKey[]>([]);
const checkedRow = ref({});
const rowKey = (row: RowData) => row.tableId;
const formRef = ref<FormInst | null>(null)

const formValue = ref({
  tableName: ''
})

const pagination = {
  pageSize: 10
}

interface RowData {
  db: string
  tableName: string
  tableId: string
  comments: string
}

function createColumns(): DataTableColumns<RowData> {
  return [
    {
      type: 'selection',
      multiple: false
    },
    {
      title: '数据库',
      key: 'db'
    },
    {
      title: '表名称',
      key: 'tableName'
    },
    {
      title: '表ID',
      key: 'tableId'
    },
    {
      title: '备注',
      key: 'comments'
    }
  ]
}

const columns = createColumns()

const editorData = ref<RowData[]>([])

const handleCheck = (keys: DataTableRowKey[], rows: object[]) => {
  console.log('---rows---', rows)
  checkedRowKeys.value = keys
  checkedRow.value = rows[0]
  console.log('checkedRow.value', checkedRow.value)
}

// 确定按钮点击事件
const btnLoading = ref<boolean>(false)
const onSure = () => {
  if (checkedRowKeys.value.length) {
    saveTable()
  } else {
    window.$message.error('请选择表数据')
  }
}

// 取消按钮点击事件
const onCancel = () => {
  showModal.value = false
}

// 获取表列表
const getTableList = async () => {
  contentLoading.value = true;
  const res = await getTableListAPI({
    tableName: formValue.value?.tableName || ''
  })
  console.log(res)
  if (res.status === 200) {
    editorData.value = res.value?.data || []
  }
  contentLoading.value = false
}

// 保存表
const saveTable = async () => {
  btnLoading.value = true
  console.log('checkedRowKeys.value', checkedRowKeys.value)
  const params = {
    id: checkedRow.value?.tableId || '',
    tablename: checkedRow.value?.tableName || '',
    title: checkedRow.value?.comments || ''
  }
  const res = await saveXXTableAPI(params)
  console.log(res)
  if (res.status === 200) {
    showModal.value = false;
    emits('handleSubmit')
  }
  btnLoading.value = false;
}

// 搜索条件校验
const handleValidateClick = (e: MouseEvent) => {
  e.preventDefault()
  getTableList()
}

const handleResetValidate = () => {
  formValue.value.tableName = '';
  getTableList()
}


watch(showModal, (val) => {
  if (val) {
    getTableList()
  }
})
</script>

<template>
  <n-modal v-model:show="showModal" preset="dialog" style="width: 800px;" title="导入表" :mask-closable="false"
           :close-on-esc="false">
    <div class="modal-content">
      <!-- 搜索条件 -->
      <n-form ref="formRef" inline :label-width="80" :model="formValue" label-placement="left"
              label-width="auto">
        <n-form-item label="表名称" path="tableName">
          <n-input v-model:value="formValue.tableName" placeholder="输入表名称"/>
        </n-form-item>
        <n-form-item>
          <n-space>
            <n-button attr-type="button" type="info" @click="handleValidateClick">
              搜索
            </n-button>
            <n-button attr-type="button" @click="handleResetValidate">
              重置
            </n-button>
          </n-space>
        </n-form-item>
      </n-form>
      <!-- 表格 -->
      <n-data-table
          :columns="columns"
          :data="editorData"
          :pagination="pagination"
          :row-key="rowKey"
          :loading="contentLoading"
          @update:checked-row-keys="handleCheck"
      />
    </div>
    <template #action>
      <n-button size="small" type="info" :loading="btnLoading" @click="onSure">确定</n-button>
      <n-button size="small" @click="onCancel">取消</n-button>
    </template>
  </n-modal>
</template>

<style scoped lang="scss">
.modal-content {

}
</style>